<template>
  <el-dialog
    center
    :title="dialogData.type === 'add' ? '新增奖品' : '编辑奖品'"
    :visible.sync="dialogData.isShow"
    width="30%"
  >
    <div class="form-box">
      <el-form
        ref="formData"
        :rules="rules"
        :model="formData"
        label-width="120px"
      >
        <el-form-item label="一级分类:" prop="oneLevelClassify">
          <el-select
            v-model="formData.oneLevelClassify"
            placeholder="请选择一级分类"
            @change="checkClassifId"
          >
            <el-option
              v-for="item in oneLevelClassifyList"
              :key="item.classify"
              :label="item.name"
              :value="item.classify"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级分类:" prop="twoLevelClassify">
          <el-select
            v-model="formData.twoLevelClassify"
            placeholder="请选择二级分类"
          >
            <el-option
              v-for="item in twoLevelClassifyList"
              :key="item.classify"
              :label="item.name"
              :value="item.classify"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="奖品名称:" prop="name">
          <el-input
            type="text"
            placeholder="请输入奖品名称"
            v-model.trim="formData.name"
            maxlength="20"
            show-word-limit
            :disabled="dialogData.type === 'edit'"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="兑换价:" prop="value">
          <el-input
            v-model.trim="formData.value"
            type="number"
            placeholder="请输入奖品兑换价"
            maxlength="5"
          ></el-input>
        </el-form-item>
        <el-form-item class="min-margin" label="奖品图片" prop="img">
          <uploadSingImg
            :imgUrl="formData.img"
            accept=".jpg,.jpeg,.png"
            :maxSize="1"
            @getImgUrl="getPrizeImg"
            :disabled="false"
          >
            <template v-slot:imgInfo
              >支持jpg、png格式上传，最大不超过1M<br />实体建议尺寸143x143，卡卷建议286X184</template
            >
          </uploadSingImg>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="success" plain @click="dialogData.isShow = false">
        取 消
      </el-button>
      <el-button type="success" @click="confirm('formData')">提交</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { getTowClass } from '@/api/activityCenter/activityManage/common'
import uploadSingImg from '@common/uploadSingImg'
export default {
  props: ['dialogData'],
  data() {
    var validatePrice = (rule, value, callback) => {
      var reg = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/
      if (Number(value) < 1 || !reg.test(value)) {
        callback(new Error('请输入1-99999,且精确到两位小数'))
      } else {
        callback()
      }
    }
    return {
      formData: {
        name: '',
        twoLevelClassify: '',
        value: '',
        activityId: '',
        oneLevelClassify: '',
        img: '',
        activityType: ''
      },
      oneLevelClassifyList: [],
      twoLevelClassifyList: [],
      rules: {
        oneLevelClassify: [
          { required: true, message: '请选择一级分类', trigger: 'change' }
        ],
        twoLevelClassify: [
          { required: true, message: '请选择二级分类', trigger: 'change' }
        ],
        name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
        value: [{ required: true, validator: validatePrice, trigger: 'blur' }],
        img: [{ required: true, message: '请上传图片', trigger: 'change' }]
      }
    }
  },
  components: { uploadSingImg },
  mounted() {
    this.oneLevelClassifyList = this.dialogData.oneLevelClassifyList
    this.formData.activityId = this.dialogData.activityId
    this.formData.activityType = this.dialogData.activityType
    if (this.dialogData.type === 'edit') {
      this.dialogData.getPrizeDetail(this.dialogData.id, {}, (res) => {
        this.formData = res
        getTowClass(res.oneLevelClassify, {}, (res) => {
          this.twoLevelClassifyList = res
        })
      })
    }
  },
  methods: {
    /* 上传图片 */
    getPrizeImg(url) {
      this.formData.img = url
    },
    /* 重新选择一级清空二级 */
    checkClassifId(val) {
      this.twoLevelClassifyList = []
      this.formData.twoLevelClassify = ''
      getTowClass(val, {}, (res) => {
        this.twoLevelClassifyList = res
      })
    },
    /* 提交 */
    confirm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const { type } = this.dialogData
          if (type === 'add') {
            this.dialogData.addPrize(this.formData, () => {
              this.$emit('searchList')
              this.dialogData.isShow = false
            })
          } else {
            const { id } = this.dialogData
            this.dialogData.editPrize(id, this.formData, () => {
              this.$emit('searchList')
              this.dialogData.isShow = false
            })
          }
        }
      })
    }
  }
}
</script>
<style lang="less" scoped></style>
